<template>
	<view class="com-cell y-flex y-row y-align-center" :style="{
		'padding-top': paddingTopBottom,
		'padding-bottom': paddingTopBottom,
		'padding-left': paddingLeftRight,
		'padding-right': paddingLeftRight,
		'border-bottom-width': border ? '1px' : '',
		'border-bottom-color': border ? borderColor : ''
	}" @tap="handleTap">
		<view class="y-flex y-flex-1">
			<slot name="left-icon"></slot>
			<slot name="title">
				<text :style="{color: titleColor, 'font-size': _pixelunit(titleSize)}">{{title}}</text>
			</slot>
			<slot name="label">
				<text class="mt-20" :style="{color: labelColor, 'font-size': _pixelunit(labelSize)}" v-if="label">{{label}}</text>
			</slot>
		</view>
		<slot name="text">
			<text :style="{color: textColor, 'font-size': _pixelunit(textSize)}" v-if="text">{{text}}</text>
		</slot>
		<slot name="right-icon">
			<com-icon class="ml-15" name="right" size="34" :color="labelColor" v-if="linkable"></com-icon>
		</slot>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	export default {
		props: {
			linkable: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			padding: {
				type: [Number, String],
				default: '40rpx 30rpx'
			},
			text: {
				type: [String, Number],
				default: ''
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			labelColor: {
				type: String,
				default: '#999'
			},
			textColor: {
				type: String,
				default: '#444'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			titleSize: {
				type: [String, Number],
				default: '32'
			},
			labelSize: {
				type: [String, Number],
				default: '28'
			},
			textSize: {
				type: [String, Number],
				default: '30'
			}
		},
		computed: {
			paddingTopBottom () {
				const paddings = this.padding.split(' ')
				return this._pixelunit(paddings[0] || 0)
			},
			paddingLeftRight () {
				const paddings = this.padding.split(' ')
				return this._pixelunit(paddings[1] || paddings[0] || 0)
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap() {
				if ( this.linkable ) this.$emit('click')
			}
		}
	}
</script>

<style>
	.com-cell {
		border-bottom-style: solid;
	}
</style>